<%@ taglib prefix="s" uri="/struts-tags"%>
<%@page import="com.ids.bean.UserInfo"%>
<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="com.ids.util.Constants"%>
<%@page import="java.util.Collection"%>
<%@page import="java.util.Map"%>
	
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<!-- 2 required plugins -->
<script type="text/javascript" src="js/date.js"></script>
<!-- 3 jquery.datePicker.js -->
<script type="text/javascript" src="js/jquery_002.js"></script>
<!-- 4 datePicker required styles -->
<link rel="stylesheet" type="text/css" media="screen" href="css/datePicker.css">
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script type="text/javascript" src="js/ui.datepicker.js"></script>
<script language="javascript">
function doValidate()
{
	var selectedDate = document.getElementById('datepick').value;
 	var todaysDate = new Date();
 	todaysDate = new Date(todaysDate.getYear(), todaysDate.getMonth(), todaysDate.getDate());
 	var dt1   = parseInt(selectedDate.substring(0,2),10); 
	var mon1  = parseInt(selectedDate.substring(3,5),10);
	var yr1   = 100 + parseInt(selectedDate.substring(8,10),10); 
	var selDate = new Date(yr1, mon1-1, dt1); 
    var diff = eval(selDate - todaysDate)/86400000;
 	if (diff>1 || diff<-1){   
    alert("Invalid date value");
     document.getElementById('datepick').value="";       
   }
 }


</script>
<script type="text/javascript" charset="utf-8">
  	$(document).ready(function () {
  	$('#attendanceTypeId').change(function(){
    var postData = $('#attendanceTypeId').val();
   
    if(postData ==4||postData ==5||postData ==8||postData ==16||postData ==17||postData ==20){
    document.getElementById('dependantAttendanceTypeDivId').style.display = 'none';
    document.getElementById('noOfDays').style.display = 'none';
    document.getElementById('daysLabel').style.display = 'none';
        $.ajax({
    type: "POST",
    url: "AttendanceScreenDropDown",
    data: {"attendanceTypeValue":postData},
    success: function(msg){
    $('#dependantAttendanceTypeDivId').html(msg);
   }
  });
    }
    
     else if(postData != 6){
     document.getElementById('dependantAttendanceTypeDivId').style.display = 'block';
     document.getElementById('noOfDays').style.display = 'none';
     document.getElementById('daysLabel').style.display = 'none';              
     $.ajax({
     type: "POST",
     url: "AttendanceScreenDropDown",
     data: {"attendanceTypeValue":postData},
     success: function(msg){
     $('#dependantAttendanceTypeDivId').html(msg);
   }
  });
  }else{
  document.getElementById('dependantAttendanceTypeDivId').style.display = 'none';
  document.getElementById('noOfDays').style.display = 'block';     
  document.getElementById('daysLabel').style.display = 'block'; 
  }
   });
   }); 
	</script>
	          
	
		<s:form action="Attendance">
		<center>
		<%
			if (request.getAttribute(Constants.USER_ATTENDANCE_MESSAGE) != null) {
			out.print(request
			.getAttribute(Constants.USER_ATTENDANCE_MESSAGE));
			}
		%>
		</center>
		<table align="center" class="borderAll">
		<tr>
		<td>
			<table align="center" style="width:50%;border:0px" border="0"
			 class="borderAll">
			 <tr>
				<td colspan="3" align="center">
				<%
				Date currentDate = new Date();
				SimpleDateFormat formatter = new SimpleDateFormat("dd-MM-yy");
				String currentFormattedDate = formatter.format(currentDate);
				Map attendanceTypes = (Map) request.getAttribute("attendanceTypes");
				Map noOfDays = (Map) request.getAttribute("noOfDays");
				Map dependantAttendanceType = (Map) request.getAttribute("dependantAttendanceType");
				System.out.println(attendanceTypes);
				System.out.println(dependantAttendanceType);
				%>
				</td>
			</tr>
			<tr>
			<td colspan="3"><br></td>
			</tr>
			<tr>
			<td><s:text name="Date" /></td>
			<td>
			<s:textfield  id="datepick" theme="simple" name="datepick" onchange='doValidate()' required="true"  style="color:black;" readonly="true"/>
			</td>
			<td></td>
			</tr>
			<tr>
				<td><s:text name="Attendance" /></td>
				<td>
				
				<s:select list="attendanceType" listKey="key"
					listValue="value" name="attendanceTypeId" label="Attendance"
					id="attendanceTypeId" theme="simple" required="true" value="defaultAttendanceId" ></s:select>
				</td>
				<td>
					<div id="dependantAttendanceTypeDivId"><s:select
						list="dependantAttendanceType" listKey="key" listValue="value"
						name="dependantAttendanceTypeId" id="dependantAttendanceTypeId"
						theme="simple" required="true"></s:select></div>
				</td>
				
				<td><s:label cssStyle="display:none" id="daysLabel" name="No of days" theme="simple" value="No of days"/></td>           
				<td>
					<s:select list="noOfDays" listKey="key"
					listValue="value" name="noOfDays" 
					id="noOfDays" theme="simple" required="true" cssStyle="display:none" label="No of Days"  ></s:select>
					 
				</td>
				</tr>
				<tr>
					<td><br></td>
				</tr>
				<tr>
				<td colspan="3" align="center"><input type="submit"
					value="Submit"> </td>
				</tr>
				<tr>
					<td colspan="3"><br></td>
				</tr>
			</table>
			</td>
			</tr>
		</table>
		</s:form>
	<script type="text/javascript" charset="utf-8">
	$(function() {
	var d = new Date();
				$('#datepick').datePicker({startDate:'01/01/2011', minDate: '-2D', maxDate: '+2D', buttonImage: 'images/calendar.gif',defaultDate: d ,dateFormat: 'dd-mm-yyyy'})   
		});
	</script>          
	